<template>
  <view class="cm-page">
    <view class="hero">
      <view class="hero-title">社区管理</view>
      <view class="hero-sub">维护服务社区，方便用户就近自提</view>
    </view>

    <scroll-view class="list" scroll-y>
      <uv-empty v-if="list.length===0" mode="data" text="暂无社区" />

      <view v-for="it in list" :key="it.id" class="card">
        <view class="row1">
          <view class="left">
            <text class="name">{{ it.name }}</text>
            <uv-tags :text="it.range || '2km服务范围'" size="mini" plain type="primary" custom-style="margin-left: 8rpx;" />
          </view>
          <view class="ops">
            <uv-button size="small" type="primary" plain shape="circle" @tap.stop="edit(it)">编辑</uv-button>
            <uv-button size="small" type="error"  plain shape="circle" @tap.stop="remove(it)">删除</uv-button>
          </view>
        </view>
        <view class="row2">地址：{{ it.address }}</view>
        <view class="row3">联系人：{{ it.contact }} ｜ 电话：{{ it.phone }}</view>
      </view>

      <view class="pad" />
    </scroll-view>

    <view class="footer">
      <uv-button type="primary" shape="circle" @tap="add">新增社区</uv-button>
    </view>
  </view>
</template>

<script setup>
// 中文注释：社区管理页（uv-ui），当前使用本地状态，预留对接位 TODO: /api/community/*
import { ref } from 'vue'

const list = ref([
  // 示例数据，后端接入时替换
  // { id: 1, name: '锦绣花园社区', address: 'XX路88号1栋101', contact: '李四', phone: '13800000000', range: '3km' }
])

const add = () => {
  // TODO: 跳转新增社区页 /pages/leader/community-edit
  uni.showToast({ title: '请对接新增社区页', icon: 'none' })
}
const edit = (it) => {
  // TODO: 跳转编辑社区页 /pages/leader/community-edit?id=it.id
  uni.showToast({ title: '请对接编辑社区页', icon: 'none' })
}
const remove = (it) => {
  uni.showModal({
    title: '提示',
    content: `确定删除【${it.name}】吗？`,
    success: (res) => {
      if (res.confirm) {
        // TODO: 调用后端删除接口 deleteCommunity(it.id)
        list.value = list.value.filter(x => x.id !== it.id)
        uni.showToast({ title: '已删除', icon: 'none' })
      }
    }
  })
}
</script>

<style scoped lang="scss">
.cm-page { min-height: 100vh; background: $uni-bg-color-grey; }
.hero { padding: 24rpx; }
.hero-title { font-size: 36rpx; font-weight: 700; color: #1f2d3d; }
.hero-sub { font-size: 24rpx; color: #6b7c93; margin-top: 6rpx; }

.list { height: calc(100vh - 200rpx); padding: 0 16rpx; box-sizing: border-box; }
.card { background: #fff; border-radius: 16rpx; padding: 20rpx; margin: 16rpx 8rpx; box-shadow: 0 12rpx 32rpx rgba(0,0,0,0.06); }
.row1 { display: flex; justify-content: space-between; align-items: center; }
.left { display: flex; align-items: center; }
.name { font-size: 30rpx; color: #222; font-weight: 600; }
.ops { display: flex; gap: 12rpx; }
.row2 { margin-top: 8rpx; color: #666; font-size: 26rpx; }
.row3 { margin-top: 6rpx; color: #999; font-size: 24rpx; }

.footer { position: fixed; left: 0; right: 0; bottom: env(safe-area-inset-bottom); bottom: 0; background: #fff; padding: 16rpx; box-shadow: 0 -8rpx 24rpx rgba(0,0,0,0.06); }
.pad { height: 140rpx; }
</style>
